<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
</head>
<body>
<form action="/day02/excel">
    <button class="layui-btn" onclick="x_admin_show('添加用户','/day02/add')" type="button"><i class="layui-icon"></i>添加</button>
    <button class="layui-btn"  type="submit"><i class="layui-icon"></i>excel导出</button>
</form>
    <table class="layui-table">
        <thead>
            <th>ID</th>
            <th>登录名</th>
            <th>手机</th>
            <th>邮箱</th>
            <th>角色</th>
            <th>状态</th>
            <th>操作</th>
        </thead>
        <tbody>
            <tr th:each="x:${list.userList}">
                <td th:text="${x.uId}"></td>
                <td th:text="${x.userName}"></td>
                <td th:text="${x.userDetail.phone}"></td>
                <td th:text="${x.userDetail.email}"></td>
                <td>
                    <ul th:each="y:${x.roleInfoList}">
                        <li th:text="${y.rName}" style="float: left;margin: 5px"> </li>
                    </ul>

                </td>
                <td  class="td-status" th:if="${x.userDetail.state==1}">
                    <span class="layui-btn layui-btn-normal layui-btn-mini">启用</span>
                </td>
                <td class="td-status" th:if="${x.userDetail.state==0}">
                    <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled">停用</span>
                </td>

                <td class="td-manage" th:if="${x.userDetail.state==1}">
                    <a onclick="member_stop(this)" href="javascript:;"  title="启用">
                        <i class="layui-icon">&#xe62f;</i>
                    </a>
                    <a title="编辑"  onclick="update(this)" href="javascript:;">
                        <i class="layui-icon">&#xe642;</i>
                    </a>
                    <a title="删除" onclick="member_del(this,'要删除的id')" href="javascript:;">
                        <i class="layui-icon">&#xe640;</i>
                    </a>
                </td>
                <td class="td-manage" th:if="${x.userDetail.state==0}">
                    <a onclick="member_stop(this)" href="javascript:;"  title="停用">
                        <i class="layui-icon">&#xe601;</i>
                    </a>
                    <a title="编辑"  onclick="update(this)" href="javascript:;">
                        <i class="layui-icon">&#xe642;</i>
                    </a>
                    <a title="删除" onclick="member_del(this,'要删除的id')" href="javascript:;">
                        <i class="layui-icon">&#xe640;</i>
                    </a>
                </td>

            </tr>
        </tbody>
    </table>
    <div class="page">
        <div>
            <a class="prev" th:href="@{/day02/list(page=${list.prePage})}">&lt;&lt;</a>
            <a class="num" href="/day02/list">首页</a>
            <span class="current" th:text="${list.curPage}"></span>
            <a class="num" th:href="@{/day02/list(page=${list.totalPage})}">尾页</a>
            <a class="next" th:href="@{/day02/list(page=${list.nextPage})}">&gt;&gt;</a>
        </div>
    </div>

</body>
</html>
<script>
    /*用户-停用*/
    function member_stop(obj){
        //var tel = $(obj).parents("tr").find("td").eq(2).text()
        //layer.alert(tel)
        //更改按钮样式
        if($(obj).attr("title")=="停用"){
            //更改属性title值
            $(obj).attr("title","启用")
            //移除禁用样式并且更改按钮的文本值为启用
            $(obj).parents("tr").find("td").eq(5).find("span").removeClass("layui-btn-disabled").text("启用")
            //更改图标
            $(obj).find("i").html("&#xe62f;")
        }else{
            $(obj).attr("title","停用")
            $(obj).parents("tr").find("td").eq(5).find("span").addClass("layui-btn-disabled").text("停用")
            //更改图标
            $(obj).find("i").html("&#xe601;")
        }

        //更改文本值
        //$(obj).parents("tr").find("td").eq(5).find("span").text("启用")

    }

    //打开修改页面
    /*用户-编辑*/
    function update(obj) {
        //获取要编辑用户的编号uId
        var uId=$(obj).parents("tr").find("td").eq(0).text();
        //访问修改页面地址，把编号uId传过去
        var url ='/day02/update?uId='+uId
        x_admin_show('用户修改',url)
    }

</script>